From d2b5beffbfa3d8d8dc5f04424ad235b524c2b17b Mon Sep 17 00:00:00 2001 From: Alexander Mikhaylenko Date: Mon, 4 May 2020 19:23:49 +0500 Subject: [PATCH] Adwaita: Convert entries to the new focus rings --- gtk/theme/Adwaita/_common.scss | 36 ++++----------------------------- gtk/theme/Adwaita/_drawing.scss | 21 ++++++------------- 2 files changed, 10 insertions(+), 47 deletions(-) diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss index ba1e6738dd..ac06013bcb 100644 --- a/gtk/theme/Adwaita/_common.scss +++ b/gtk/theme/Adwaita/_common.scss @@ -291,6 +291,8 @@ entry { @include entry(normal); + @include focus-ring($within: true); + > image { // icons inside the entry &.left { margin-right: 6px; } &.right { margin-left: 6px; } @@ -338,7 +340,8 @@ entry { (warning, $warning_color) { &.#{$e_type} { color: $e_color; - border-color: entry_focus_border($e_color); + + @include focus-ring($within: true, $fc: $e_color); &:focus-within { @include entry(focus, $e_color); } @@ -396,13 +399,6 @@ entry { // linked entries .linked:not(.vertical) > & { @extend %linked; } - .linked:not(.vertical) > &:focus-within + &, - .linked:not(.vertical) > &:focus-within + button, - .linked:not(.vertical) > &:focus-within + combobox > box > button.combo { border-left-color: entry_focus_border(); } - - .linked:not(.vertical) > &:focus-within.error + &, - .linked:not(.vertical) > &:focus-within.error + button, - .linked:not(.vertical) > &:focus-within.error + combobox > box > button.combo { border-left-color: entry_focus_border($error_color); } .linked:not(.vertical) > &:drop(active) + &, .linked:not(.vertical) > &:drop(active) + button, @@ -425,33 +421,9 @@ entry { &:disabled + %entry:disabled, &:disabled + entry:disabled { border-top-color: mix($borders_color, $base_color, 30%); } - // color back the top border of a linked focused entry following another entry. - // :not(:only-child) is a specificity bump hack. - + %entry:focus-within:not(:only-child), - + entry:focus-within:not(:only-child) { border-top-color: entry_focus_border(); } - - + %entry:focus-within.error:not(:only-child), - + entry:focus-within.error:not(:only-child) { border-top-color: entry_focus_border($error_color); } - + %entry:drop(active):not(:only-child), + entry:drop(active):not(:only-child) { border-top-color: $drop_target_color; } - // this takes care of coloring the top border of the focused entry subsequent widget. - // :not(:only-child) is a specificity bump hack. - &:focus-within:not(:only-child) { - + %entry, - + entry, - + button, - + combobox > box > button.combo { border-top-color: entry_focus_border(); } - } - - &:focus-within.error:not(:only-child) { - + %entry, - + entry, - + button, - + combobox > box > button.combo { border-top-color: entry_focus_border($error_color); } - } - &:drop(active):not(:only-child) { + %entry, + entry, diff --git a/gtk/theme/Adwaita/_drawing.scss b/gtk/theme/Adwaita/_drawing.scss index d505e43e57..7e9e68ca31 100644 --- a/gtk/theme/Adwaita/_drawing.scss +++ b/gtk/theme/Adwaita/_drawing.scss @@ -7,15 +7,18 @@ // // If $target is specified, the focus ring is applied to the specified child element. // If $outer is true, the focus ring extends outward. Otherwise, it extends inward. +// If $within is true, use focus-within instead of focus:focus-visible // -@mixin focus-ring($target: null, $width: 2px, $offset: -$width, $outer: false) { +@mixin focus-ring($target: null, $width: 2px, $offset: -$width, $outer: false, $within: false, $fc: $focus_border_color) { & #{$target} { outline: 0 solid transparent; outline-offset: if($outer, $offset + 4px, $offset + $width + 4px); } - &:focus:focus-visible #{$target} { - outline-color: $focus_border_color; + $focus-state: if($within, "focus-within", "focus:focus-visible"); + + &:#{$focus-state} #{$target} { + outline-color: $fc; outline-width: $width; outline-offset: $offset; } @@ -41,11 +44,6 @@ } // entries -@function entry_focus_border($fc:$focus_border_color) { - @return $fc; -} - -@function entry_focus_shadow($fc:$focus_border_color) { @return inset 0 0 0 1px $fc; } @mixin entry($t, $fc:$focus_border_color, $edge: none) { // @@ -67,14 +65,8 @@ color: $text_color; border-color: $borders_color; background-color: $base_color; - @include _shadows(entry_focus_shadow(transparentize($fc, 1)), $_entry_edge); // for the transition to work the number of shadows in different states needs to match, hence the transparent shadow here. } - @if $t==focus { - @include _shadows(entry_focus_shadow($fc), $_entry_edge); - border-color: entry_focus_border($fc); - outline: none; - } @if $t==insensitive { color: $insensitive_fg_color; border-color: $borders_color; @@ -107,7 +99,6 @@ border-color: $selected_bg_color; background-color: transparentize(opacify($osd_borders_color, 1), 0.5); background-clip: padding-box; - box-shadow: entry_focus_shadow($fc); text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; } -- 2.30.2